import React, { Component } from 'react'
import { Text, StyleSheet, View, TouchableOpacity, ScrollView, Image } from 'react-native'
import {
  width,
  titleHeight,
  deviceWidth,
  unitWidth,
  statusBarHeight,
  reallySize,
} from '../../utils/Global';

export default class allowedPerson extends Component {
  constructor(props) {
    super(props)
    this.state = {
      title: "谁可以看",
      leftItem: "取消",
      rightItem: "确定",
      //可见分类列表
      datas: [
        {
          leftImage: require("../../assets/images/socialcircle/allCanSee.png"),
          describe: "公开·所有人可见",
          id: 0,
          flag: false
        },
        {
          leftImage: require("../../assets/images/socialcircle/friendsCanSee.png"),
          describe: "仅好友可见",
          id: 1,
          flag: false
        },
        {
          leftImage: require("../../assets/images/socialcircle/Private.png"),
          describe: "私密·仅自己可见",
          id: 2,
          flag: false
        },
        // {
        //   leftImage: require("../../assets/images/socialcircle/notAllowed.png"),
        //   describe: "不给谁看",
        //   rightArrow: require("../../assets/images/socialcircle/right_arrow.png"),
        //   id: "3",
        //   flag: false,

        // },
        {
          leftImage: require("../../assets/images/socialcircle/notFriend.png"),
          describe: "好友不可见",
          id: 4,
          flag: false
        },
      ],
    }
  }
  componentDidMount = () => {
    // console.log(this.state.selectItem_person)
  }

  //列表选中点击事件
  onClicks(item, index) {
    this.state.datas.map((item, _index) => {
      this.setState({ item_flag: item.flag = false })
      if (_index == index) {
        this.setState({ flag: item.flag = !item.flag })
      }
    })
  }

  submit() {
    this.state.datas.map(item => {
      if (item.flag) {
        // 传数据给父页面
        this.props.navigation.state.params.callBack(item)
        this.props.navigation.goBack()
      }
    })
  }

  render() {
    // this.props.navigation.state.params.callBack(this.state.selectItem_person);
    return (
      <View style={{ flex: 1, backgroundColor: "white" }}>
        <View style={styles.statusBar}></View>

        {/* 头部组件 */}
        <View style={styles.header}>
          <TouchableOpacity onPress={() => { this.props.navigation.goBack() }}>
            <Text style={{
              color: " rgba(102, 102, 102, 1)"
            }}>{this.state.leftItem}</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.whoCansee}>
            <Text style={styles.whoCansee_text}>{this.state.title}</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => { this.submit() }}>
            <Text style={{
              color: " rgba(24, 144, 255, 1)"
            }}>{this.state.rightItem}</Text>
          </TouchableOpacity>
        </View>

        {/*  可见分类列表 */}
        <ScrollView>
          <View style={styles.marlr}>
            {this.state.datas.map((item, index) => (
              <TouchableOpacity
                key={index}
                style={styles.ItemBox}
                onPress={() => {
                  this.onClicks(item.title, index),
                    index == 4 ? this.props.navigation.navigate("notAllowedPerson", {
                      // params: [],
                      // callBack: (params) => {
                      //   Alert(params);
                      // }
                    }) : null
                }}
              >
                <View style={styles.row}>
                  <Image style={styles.leftImage} source={item.leftImage} />
                  <Text style={styles.describe}>
                    {item.describe}
                  </Text>
                </View>

                <TouchableOpacity style={item.index == item.current ? styles.row : null} >
                  <Image style={styles.rightImage} source={this.state.datas[index].flag ? require("../../assets/images/socialcircle/selected.png") : null} />
                  {/* <Image style={index == 3 ? styles.rightArrow : null} source={item.rightArrow} /> */}
                </TouchableOpacity>

              </TouchableOpacity>
            ))}

          </View>
        </ScrollView>

      </View>
    )
  }
}

const styles = StyleSheet.create({

  header: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    height: 60,
    paddingLeft: 20,
    paddingRight: 20,
    backgroundColor: "white"
  },
  statusBar: {
    width: width,
    height: statusBarHeight,
    backgroundColor: 'transparent',
  },
  marlr: {
    marginLeft: 15,
    marginRight: 15,
  },
  whoCansee: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  whoCansee_text: {
    fontSize: 20,
    lineHeight: 30,
    marginLeft: 5
  },
  ItemBox: {
    flexDirection: 'row',
    justifyContent: "space-between",
    alignItems: "center",
    height: 70,
    // marginTop: 20,
    // paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: "rgba(0, 0, 0, 0.08)"
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  leftImage: {
    width: 23,
    height: 23,
    resizeMode: "contain"
  },
  describe: {
    fontSize: 17,
    marginLeft: 17
  },
  rightImage: {
    width: 15,
    height: 15,
    resizeMode: "contain"
  },
  rightArrow: {
    width: 15,
    height: 15,
    resizeMode: "contain",
    marginLeft: 20
  },
  location_select: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    paddingBottom: 20
  },
  publish_location_address: {
    paddingLeft: 10,
    paddingRight: 10,
    borderWidth: 1,
    borderColor: "rgba(0, 0, 0, 0.5)",
    borderRadius: 15,
    marginRight: 10,
    marginBottom: 10,
  },
  publish_location_addressOn: {
    paddingLeft: 10,
    paddingRight: 10,
    borderWidth: 1,
    borderColor: "rgba(0, 0, 0, 0.5)",
    borderRadius: 15,
    marginRight: 10,
    marginBottom: 10,
    backgroundColor: "rgba(225, 240, 255, 1)"
  },
  publish_location_text: {
    color: "rgba(0, 0, 0, 0.5)"
  },
  publish_location_textOn: {
    color: "rgba(225, 240, 255, 1)",
  },
})
